<template>
	<view class="distributionDetails">
		<view class="cardDetail flex-column-between">
			<view class="">
				当前佣金
			</view>
			<view class="flex-between" v-if="userinfos">
				<view style="color: rgb(255, 0, 0);font-size: 54rpx;;" class="">
					{{userinfos.surplus_commission}}
				</view>
				<view class="recharge flex" @click="withdrawal()">
					提现
				</view>
			</view>
			<view style="color: rgb(117, 117, 117);" v-if="myTeam">
				<text class="margin-right_16rpx">今日获得 {{myTeam.today_amount}}</text>
				<text>累计获得 {{myTeam.total_commission}}</text>
			</view>
		</view>
		<view class="flex-between margin_40rpx_0">
			<view class="all flex">
				全部
			</view>
			<view class="month">
				<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="flex-align-center-justify-start  color6">
						{{ yeartime }}
						<text>-</text>
						{{ monthtime }}
						<uni-icons type="right" color='#333' size="16"></uni-icons>
						<!-- <image class="arrowImg" src="../../static/124.png" mode=""></image> -->

					</view>

				</picker>
			</view>
		</view>
		<!-- 明细列表 -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="detailedList">
					<view class="flex-between margin-bottom_20rpx">
						<view class="font-weight_bold">
							{{item.type==1?'商城购买商品':'购买套餐卡'}}
						</view>
						<view style="color: rgb(49, 169, 82);" class="font-weight_bold">
							{{item.amount}}
						</view>
					</view>
					<view class="flex-between" style="color: rgb(117, 117, 117);;">
						<view class="">
							{{item.create_time}}
						</view>
						<view class="">
							{{item.level==1?'直推粉丝':'间推粉丝'}}
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: null,
				tabIndex: 4,
				currentTime: '2',
				navIndex: 0,
				searchVal: '',
				tabList: [{
					name: '直推粉丝',
					id: '1' //null
				}, {
					name: '间推粉丝',
					id: '2' //null
				}, ],
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				token: uni.getStorageSync('login').token,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				myTeam:null,
				userinfos:null
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
			this.init()
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		methods: {
			withdrawal(){
				this.$sun.navGo('/pages/distribution/applyWithdrawal/applyWithdrawal')
			},
            async init(){
				
					const ress = await this.$http.post({
						url: this.$api.userinfo,
						data: {
							id:uni.getStorageSync('userId'),
						},
						headers: {
							'Authorization': `Bearer ${this.token}`
						}
								
					})
								
					if (ress.code == 0) {
					
								
								
								
						this.$sun.toast(ress.msg, 'none')
						this.userinfos = ress.data
						
					
						console.log(this.userinfos )
								
					} else {
								
						this.$sun.toast(ress.msg, 'none')
					}
					const res = await this.$http.post({
						url: this.$api.myTeam,
						data: {
					
							
						},
						headers: {
							'Authorization': `Bearer ${this.token}`
						}
					
					})
					console.log(res)
					if (res.code == 0) {
						// 跳转到登录页面
				          this.myTeam=res.data
						 
						// this.$sun.toast(res.msg, 'none')
					} else {
						
						this.$sun.toast(res.msg, 'none')
					}
				
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},

			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.commissionDetail,
					data: {
						page: scroll.num,
						limit: 10,
						name: this.searchVal

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.count = result.data.count
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}




		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
		padding: 30rpx;
	}

	.distributionDetails {
		.cardDetail {

			height: 260rpx;
			border-radius: 10rpx;

			background: rgb(255, 255, 255);
			padding: 40rpx;

			.recharge {
				width: 152rpx;
				height: 68rpx;
				border-radius: 200rpx;
				color: rgb(255, 255, 255);
				background: rgb(255, 0, 0);
			}
		}

		.all {
			width: 102rpx;
			height: 46rpx;
			border-radius: 10rpx;
			color: rgb(255, 255, 255);
			background: rgb(255, 0, 0);
		}

		.detailedList {
			width: 710rpx;
			height: 152rpx;
			border-radius: 10rpx;
			padding: 30rpx;
			background: rgb(255, 255, 255);
		}
	}
</style>